شبكة CSS الفرعية (Subgrid): إطلاق العنان لقوة التخطيطات المتداخلة

أحدثت شبكة CSS (CSS Grid) ثورة في تخطيط صفحات الويب، مقدمةً مرونة وتحكماً لا مثيل لهما. ومع ذلك، يمكن أن تصبح إدارة الشبكات المتداخلة مرهقة في بعض الأحيان. وهنا يأتي دور شبكة CSS الفرعية (Subgrid) لإنقاذ الموقف. تسمح الشبكة الفرعية لعنصر الشبكة بأن يرث أحجام المسارات من شبكته الأم، مما يبسط التخطيطات المعقدة ويجعل الكود الخاص بك أكثر قابلية للصيانة. يقدم هذا المقال دليلاً شاملاً لفهم وتطبيق شبكة CSS الفرعية، مع أمثلة عملية ورؤى للمطورين من جميع المستويات.

ما هي شبكة CSS الفرعية (Subgrid)؟

الشبكة الفرعية هي ميزة في شبكة CSS تمكّن عنصر الشبكة من أن يصبح شبكة بحد ذاته، ويرث مسارات الصفوف والأعمدة المحددة في شبكته الأم. هذا يعني أنه يمكنك محاذاة المحتوى عبر شبكات متداخلة متعددة دون تحديد أحجام المسارات بشكل صريح في كل شبكة متداخلة. فكر في الأمر كطريقة لتوسيع هيكل الشبكة الأم إلى عناصرها الأبناء، مما يخلق تخطيطاً أكثر تماسكاً واتساقاً.

لماذا نستخدم الشبكة الفرعية (Subgrid)؟

• تخطيطات مبسطة: تقلل الشبكة الفرعية من تعقيد الشبكات المتداخلة، مما يجعل كود CSS الخاص بك أكثر نظافة وسهولة في الفهم.
• محاذاة متسقة: يمكنك بسهولة محاذاة المحتوى عبر مستويات متعددة من التداخل، مما يضمن تصميماً جذاباً بصرياً واحترافياً.
• قابلية صيانة محسّنة: تنتشر التغييرات التي تجرى على الشبكة الأم تلقائياً إلى الشبكات الفرعية، مما يقلل من الحاجة إلى تعديلات يدوية في أماكن متعددة.
• استجابة معززة: تعمل الشبكة الفرعية بسلاسة مع مبادئ التصميم سريع الاستجابة، وتكيف التخطيطات مع أحجام الشاشات المختلفة دون التسبب في كسور في التخطيط.

توافق المتصفحات

قبل الغوص في التنفيذ، من الضروري التحقق من توافق المتصفحات. اعتباراً من أواخر عام 2023، تتمتع الشبكة الفرعية بدعم جيد عبر المتصفحات الحديثة بما في ذلك Chrome و Firefox و Safari و Edge. ومع ذلك، من الممارسات الجيدة دائماً استخدام Can I use للتحقق من أحدث حالة للدعم.

التنفيذ الأساسي للشبكة الفرعية (Subgrid)

لنبدأ بمثال بسيط لتوضيح المفاهيم الأساسية للشبكة الفرعية.

هيكل HTML

أولاً، نحدد هيكل HTML الأساسي لشبكتنا.

            
<div class="container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">
    <div class="item-1">Item 1</div>
    <div class="item-2">Item 2</div>
    <div class="item-3">Item 3</div>
    <div class="item-4">Item 4</div>
  </div>
  <div class="footer">Footer</div>
</div>

            

              
                Copy
              
            
          

تنسيق CSS

الآن، لنقم بتعريف CSS لإنشاء الشبكة الأم والشبكة الفرعية داخل عنصر .content.

            
.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  height: 100vh;
}

.header {
  grid-area: header;
  background-color: #eee;
  padding: 10px;
}

.sidebar {
  grid-area: sidebar;
  background-color: #ddd;
  padding: 10px;
}

.content {
  grid-area: content;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  background-color: #ccc;
  padding: 10px;
}

.item-1, .item-2, .item-3, .item-4 {
  background-color: #bbb;
  padding: 10px;
}

.footer {
  grid-area: footer;
  background-color: #eee;
  padding: 10px;
}

/* Define placement of items inside the .content subgrid */
.content {
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    display: grid;
}

.item-1 { grid-column: 1; grid-row: 1; }
.item-2 { grid-column: 2; grid-row: 1; }
.item-3 { grid-column: 1; grid-row: 2; }
.item-4 { grid-column: 2; grid-row: 2; }



            

              
                Copy
              
            
          

في هذا المثال، يتم تعريف عنصر .content كشبكة فرعية. الخاصيتان grid-template-columns: subgrid; و grid-template-rows: subgrid; توجهان الشبكة الفرعية لترث أحجام المسارات من الشبكة الأم. تتوافق منطقة المحتوى الآن مع أحجام المسارات المحددة في شبكة الحاوية الرئيسية، دون الحاجة إلى أي إعدادات صريحة للشبكة الفرعية نفسها. هذا يضمن محاذاة مثالية بين الشريط الجانبي والعناصر داخل منطقة المحتوى.

تقنيات متقدمة للشبكة الفرعية (Subgrid)

التمدد عبر المسارات

تسمح الشبكة الفرعية أيضاً للعناصر داخلها بالتمدد عبر مسارات متعددة، تماماً كما في الشبكة العادية. وهذا يوفر مرونة أكبر في إنشاء تخطيطات معقدة.

            
.item-1 {
  grid-column: 1 / span 2;
  grid-row: 1;
}

            

              
                Copy
              
            
          

هذا الكود سيجعل .item-1 يمتد عبر أول عمودين من الشبكة الفرعية.

خطوط الشبكة المسماة

يمكنك استخدام خطوط الشبكة المسماة مع الشبكة الفرعية لمزيد من الوضوح والتحكم. لنفترض أن لديك خطوطاً مسماة في شبكتك الأم:

            
.container {
  display: grid;
  grid-template-columns: [sidebar-start] 200px [sidebar-end content-start] 1fr [content-end];
  grid-template-rows: [header-start] auto [header-end content-start] 1fr [content-end footer-start] auto [footer-end];
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  height: 100vh;
}

            

              
                Copy
              
            
          

يمكنك بعد ذلك الإشارة إلى هذه الخطوط المسماة داخل شبكتك الفرعية:

            
.content {
  grid-area: content;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.item-1 {
  grid-column: content-start / content-end;
  grid-row: content-start;
}

            

              
                Copy
              
            
          

التعامل مع المسارات الضمنية

إذا تجاوز عدد عناصر الشبكة عدد المسارات المحددة في الشبكة الأم، فستقوم الشبكة الفرعية بإنشاء مسارات ضمنية. يمكنك التحكم في حجم هذه المسارات الضمنية باستخدام الخاصيتين grid-auto-rows و grid-auto-columns، بشكل مشابه لشبكة CSS العادية.

أمثلة عملية وحالات استخدام

دعنا نستكشف بعض الأمثلة العملية لكيفية استخدام الشبكة الفرعية لإنشاء تخطيطات متطورة.

قائمة منتجات معقدة

تخيل قائمة منتجات حيث تريد عرض تفاصيل متعددة للمنتج (صورة، اسم، وصف، سعر) بطريقة متسقة ومتناسقة. يمكن للشبكة الفرعية أن تساعد في تحقيق ذلك بسهولة.

            
<div class="product-grid">
  <div class="product">
    <img src="product1.jpg" alt="Product 1">
    <h3>Product Name 1</h3>
    <p>Description of product 1.</p>
    <span>$99.99</span>
  </div>
  <div class="product">
    <img src="product2.jpg" alt="Product 2">
    <h3>Product Name 2</h3>
    <p>Description of product 2.</p>
    <span>$129.99</span>
  </div>
</div>

            

              
                Copy
              
            
          

            
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.product {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  border: 1px solid #ccc;
  padding: 10px;
}

.product > img {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: auto;
}

.product > h3 {
  grid-column: 1;
  grid-row: 2;
  margin-top: 10px;
}

.product > p {
  grid-column: 1;
  grid-row: 3;
  margin-top: 5px;
}

.product > span {
  grid-column: 1;
  grid-row: 4;
  margin-top: 10px;
  font-weight: bold;
}

            

              
                Copy
              
            
          

في هذا المثال، تستخدم عناصر .product الشبكة الفرعية لمحاذاة الصورة والاسم والوصف والسعر بشكل متسق عبر جميع المنتجات، حتى لو اختلفت أطوال محتوياتها. هذا يضمن عرضاً نظيفاً واحترافياً.

تخطيط بنمط المجلات

قد يكون إنشاء تخطيطات بنمط المجلات مع كتل محتوى متفاوتة أمراً صعباً. تبسط الشبكة الفرعية هذه العملية من خلال السماح لك بمحاذاة العناصر عبر أقسام مختلفة من التخطيط.

            
<div class="magazine-layout">
  <div class="main-article">
    <h2>Main Article Title</h2>
    <p>Main article content...</p>
  </div>
  <div class="sidebar-article">
    <h3>Sidebar Article Title</h3>
    <p>Sidebar article content...</p>
  </div>
  <div class="featured-image">
    <img src="featured.jpg" alt="Featured Image">
  </div>
</div>

            

              
                Copy
              
            
          

            
.magazine-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
}

.main-article {
  grid-column: 1;
  grid-row: 1 / span 2;
  border: 1px solid #ccc;
  padding: 10px;
}

.sidebar-article {
  grid-column: 2;
  grid-row: 1;
  border: 1px solid #ccc;
  padding: 10px;
}

.featured-image {
  grid-column: 2;
  grid-row: 2;
  border: 1px solid #ccc;
  padding: 10px;
}

.magazine-layout > div {
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
}

.magazine-layout h2, .magazine-layout h3 {
    grid-column: 1;
    grid-row: 1;
}

.magazine-layout p {
    grid-column: 1;
    grid-row: 2;
}

.magazine-layout img {
    grid-column: 1;
    grid-row: 1;
}


            

              
                Copy
              
            
          

في هذا المثال، يتشارك المقال الرئيسي والمقال الجانبي والصورة المميزة في نفس هيكل الشبكة، مما يضمن محاذاة متسقة للعناوين والمحتوى عبر الأقسام المختلفة. إن استخدام الشبكة الفرعية يبسط كود CSS ويجعل التخطيط أكثر قابلية للصيانة.

تخطيطات النماذج

قد يكون إنشاء تخطيطات نماذج معقدة مع تسميات وحقول إدخال متناسقة أمراً صعباً. توفر الشبكة الفرعية حلاً مباشراً.

            
<form class="form-grid">
  <div class="form-row">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
  </div>
  <div class="form-row">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
  </div>
  <div class="form-row">
    <label for="message">Message:</label>
    <textarea id="message" name="message"></textarea>
  </div>
</form>

            

              
                Copy
              
            
          

            
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.form-row {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.form-row label {
  grid-column: 1;
  grid-row: 1;
  text-align: right;
  padding-right: 10px;
}

.form-row input, .form-row textarea {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
}


.form-grid {
    display: grid;
    grid-template-columns: 150px 1fr; /* Define track sizes in the parent grid */
    gap: 10px;
}


            

              
                Copy
              
            
          

هنا، تستخدم عناصر .form-row الشبكة الفرعية لمحاذاة التسميات وحقول الإدخال بشكل متسق عبر جميع الصفوف. يتم تحديد أحجام المسارات في الشبكة الأم (.form-grid)، مما يضمن مظهراً موحداً.

أفضل الممارسات والاعتبارات

• ابدأ بأساس شبكي متين: قبل تطبيق الشبكة الفرعية، تأكد من أن شبكتك الأم محددة جيداً وسريعة الاستجابة.
• استخدم خطوط الشبكة المسماة: تعمل خطوط الشبكة المسماة على تحسين قابلية القراءة والصيانة، خاصة في التخطيطات المعقدة.
• اختبر بدقة: اختبر تخطيطات الشبكة الفرعية الخاصة بك عبر متصفحات وأجهزة مختلفة لضمان عرض متسق.
• ضع إمكانية الوصول في الاعتبار: تأكد من أن تخطيطات الشبكة الفرعية الخاصة بك متاحة للمستخدمين ذوي الإعاقة باستخدام HTML الدلالي وتوفير سمات ARIA المناسبة.
• لا تفرط في استخدام الشبكة الفرعية: على الرغم من قوة الشبكة الفرعية، إلا أنها ليست دائماً الحل الأفضل. ضع في اعتبارك بدائل أبسط مثل Flexbox أو الشبكة العادية للتخطيطات الأقل تعقيداً.

الشبكة الفرعية (Subgrid) مقابل شبكة CSS العادية

بينما تعد كل من الشبكة الفرعية وشبكة CSS أدوات تخطيط قوية، إلا أنهما تخدمان أغراضاً مختلفة. تعد شبكة CSS العادية مثالية لإنشاء تخطيطات الصفحة العامة وتحديد الهيكل الأساسي للمحتوى الخاص بك. من ناحية أخرى، تعتبر الشبكة الفرعية الأنسب لإدارة التخطيطات المتداخلة ومحاذاة المحتوى عبر مستويات متعددة من التداخل. فكر في الشبكة الفرعية كامتداد لشبكة CSS يبسط سيناريوهات التخطيط المعقدة.

استكشاف المشكلات الشائعة وإصلاحها

• الشبكة الفرعية لا تعمل: تحقق مرة أخرى من توافق متصفحك وتأكد من أنك قمت بتمكين الشبكة الفرعية عن طريق تعيين grid-template-columns: subgrid; و/أو grid-template-rows: subgrid; على عنصر الشبكة الفرعية.
• مشاكل المحاذاة: تحقق من أن أحجام المسارات في شبكتك الأم محددة بشكل صحيح وأن عناصر الشبكة الفرعية موضوعة بشكل صحيح باستخدام grid-column و grid-row.
• كسور غير متوقعة في التخطيط: اختبر تخطيطك على أحجام شاشات مختلفة لتحديد وإصلاح أي مشكلات في التصميم سريع الاستجابة.

الخاتمة

تعد شبكة CSS الفرعية إضافة قيمة إلى مجموعة أدوات شبكة CSS، حيث تقدم طريقة قوية لإدارة التخطيطات المتداخلة المعقدة وإنشاء تصميمات ويب جذابة بصرياً وقابلة للصيانة وسريعة الاستجابة. من خلال فهم المفاهيم الأساسية واستكشاف الأمثلة العملية، يمكنك الاستفادة من الشبكة الفرعية لبناء تخطيطات متطورة كان من الصعب أو المستحيل تحقيقها سابقاً بالتقنيات التقليدية لـ CSS. تبنى الشبكة الفرعية وافتح إمكانيات جديدة في مشاريع تطوير الويب الخاصة بك. تسمح لك الشبكة الفرعية بتوسيع قوة شبكة CSS حقاً إلى العناصر المتداخلة، مما يتيح مزيداً من التحكم وقابلية صيانة الكود. جربها واستكشف المزايا في تبسيط تخطيطات CSS المعقدة.

مصادر إضافية

• MDN Web Docs: شبكة CSS الفرعية
• مجلة Smashing: شبكة CSS الفرعية
• CSS-Tricks: شبكات CSS الفرعية